<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                                        
    <title>Document</title>
    <script>
        class Bt {
            
            // 设置构造函数，接受id值
            constructor(id) {
                this.all_bt = document.getElementById(id);
                // 根据获取到的id 获取到所有的按钮
                this.bt = this.all_bt.getElementsByTagName('input');
                // 根据获取到的id 获取到所有的div
                this.div = this.all_bt.getElementsByTagName('div');
                // 自执行
                this.go();
             }

            //  执行函数
             go(){
                
                $('#bt input').click(function(){

                    //   获取此时鼠标所在Index
                    let index = $('#bt input').index(this);
                    // alert(index);
                    // 传入index 执行图片切换
                    this.hide();
                    this.show(index);

                    }.bind(this))
                 }
                

                
               
                
                

             
             hide() {
               for(let i = 0;i<this.bt.length;i++){
                   this.bt[i].className = '';
                   this.div[i].style.display = 'none';
               }
           }

           show(index) {
                this.bt[index].className='btn1';
                this.div[index].style.display='block';
           }



        }
        window.onload = function() {
            new Bt("bt")
            ;
       }

       
        
    </script>
    <style>
        #bt div {
            width: 400px;
            height: 400px;
            border: 1px solid rebeccapurple;
            display: none;
        }
    </style>
</head>

<body>


    <div id="bt">
        <input type="button" value="001">
        <input type="button" value="002">
        <input type="button" value="003">

        <div style="display: block;">aaaa</div>
        <div>bbbb</div>
        <div>cccc</div>
    

    </div>

   
</body>

</html>